<template>
  <div>
    <the-list uri="/my/buys" ref="list">
      <template v-slot:default="{ all }">
        <div class="p-4 flex items-center" v-for="item in all" :key="item.id">
          <!-- <van-image :src="item.seller.avatar" round width="3rem" height="3rem">
          </van-image> -->
          <div class="ml-4 flex-1 flex flex-col justify-between">
            <!-- <span>{{ item.seller.username }}</span> -->
            <span>
              <small class="text-xs text-gray-500">FCB</small>
              <van-icon
                class="mx-1 text-yellow-500 iconfont icon-bit-coin-line"
              ></van-icon>
              <big class="text-red-500">{{ item.coins }}</big></span
            >
            <span class="text-xs text-gray-500"
              >发布于: {{ item.updated_at }}</span
            >
          </div>
          <div>
            <van-button v-if="!item.took" type="primary" @click="open(item)"
              >买入</van-button
            >
          </div>
        </div>
      </template>
    </the-list>

    <this-dialog ref="dialog" />
    <the-audio ref="audio" />
  </div>
</template>

<script>
import thisDialog from './dialog.vue'
import theList from '../../components/list.vue'
import theAudio from '../../components/audio.vue'

export default {
  components: { thisDialog, theList, theAudio },
  data() {
    return {}
  },
  mounted() {
    const handler = res => {
      if (res.type === 'add' && this.$store.state.alarm) {
        this.$refs.audio.play()
      }
      if (res.type === 'add' || res.type === 'cancel') {
        this.axios.get(`/m/buys/${res.id}`).then(res => {
          this.$refs.list.all.unshift(res.data.data)
        })
      }
      if (res.type === 'take') {
        this.$refs.list.all = this.$refs.list.all.filter(
          item => item.id != res.id,
        )
      }
    }

    this.$channel.bind('buy-change', handler)

    this.$once('hook:beforeDestroy', () => {
      this.$channel.unbind('buy-change', handler)
    })
  },
  methods: {
    open(row) {
      this.$refs.dialog.open(row)
    },
    refresh() {
      this.$refs.list.onRefresh()
    },
    // remove() {},
  },
}
</script>

<style>
</style>